
import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  TextInput,
  View,
  Alert
} from 'react-native';
import Icon from 'react-native-vector-icons/Entypo'
import { inject, observer } from 'mobx-react';
import Toast from 'react-native-root-toast';

@inject((stores) => {
    return {
      loginStore: stores.rootStore.loginStore,
      uiStore: stores.rootStore.uiStore
    }
  })
@observer class HomeScreen extends React.Component {
    static navigationOptions = {
        header: null,
        headerBackTitle: '返回',
        
    };
    constructor(props){
		super(props);
        this.state = {
            mobile:'',
            password: '',
            sms_code: '',
            invite_code:'',
            getCode: false,
            codeTxt:`获取验证码`,
            count: 59,
            getCode: false,
            intel: null
        }
	}
    /**
     * 点击登录
     */
    _login = ()=>{
        this.props.navigation.navigate('Login')
    }
    /**
     * 获取验证码
     */
    _getCode = () => {
        if(this.state.getCode){return;}
        if(this.state.mobile === ''){
            Alert.alert(
                '获取验证码失败',
                '手机号码不能为空',
                [
                  { text: '关闭' }
                ],
                { cancelable: false }
              )
            return;
        }
        const params = {
            type:'reg',
            mobile:this.state.mobile
        }
        this.props.loginStore.getCode(params);
        this.setState({
            getCode: true,
            codeTxt: '60秒后重新获取'
        });
        const intel = setInterval(()=>{
            if(this.state.count === 0){
                clearInterval(this.state.intel);
                this.setState({
                    codeTxt:`获取验证码`,
                    count: 59,
                    getCode: false,
                    intel: null
                })
                return;
            }
            this.setState({
                codeTxt:`${this.state.count}秒后重新获取`,
                count: this.state.count - 1
            })
        },1000);
        this.setState({
            intel
        })
    }
    /**
     * 点击注册按钮
     * 注册
     */
    _onRegister = async () => {
        if(this.state.mobile === '' || this.state.password === '' || this.state.sms_code === '' || this.state.invite_code === ''){
            Alert.alert(
                '注册失败',
                '用户密码,邀请码或者验证码不能为空',
                [
                  { text: '关闭' }
                ],
                { cancelable: false }
              )
            return;
        }
        const params = {
            mobile: this.state.mobile,
            password: this.state.password,
            sms_code: this.state.sms_code,
            invite_code: this.state.invite_code
        }
        await this.props.loginStore.register(params,()=>{
            Toast.show('注册成功');
            this.props.navigation.navigate('Login')
        })
    }
    /**
     * 找回密码
     */
    _findPassword = ()=>{
        this.props.navigation.navigate('FindPassword');
    }
     /**
     * 
     */
    _showPsw = () =>{
        this.setState({
            showPsw: !this.state.showPsw
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.logo}>
                    <Image style={styles.logoImg} source={require('../assets/images/logo.png')}></Image>
                    <View style={styles.formBox}>
                        <View style={[styles.formItem,styles.formUserItem]}>
                            <Text style={styles.formLabel}>手机号:</Text>
                            <TextInput
                                style={styles.formUser}
                                placeholder='手机号'
                                onChangeText={(text) => this.setState({mobile: text})}
                                value={this.state.mobile}
                            />
                        </View>
                        <View style={styles.formItem}>
                            <Text style={styles.formLabel}>邀请码:</Text>
                            <TextInput
                                style={styles.formPsw}
                                placeholder='请输入邀请码'
                                onChangeText={(text) => this.setState({invite_code: text})}
                                value={this.state.invite_code}
                            /> 
                        </View>
                        <View style={[styles.formItem,styles.formPswItem]}>
                            <Text style={styles.formLabel}>密码:</Text>
                            <TextInput
                                style={styles.formPsw}
                                password={true}
                                placeholder='请输入登录密码'
                                secureTextEntry={this.state.showPsw ? false : true}
                                onChangeText={(text) => this.setState({password: text})}
                                value={this.state.password}
                            />
                           
                           <TouchableOpacity onPress={this._showPsw}><Icon name={this.state.showPsw ? 'eye' : 'eye-with-line'} style={styles.formIcon}></Icon></TouchableOpacity>
                        </View>
                        <View style={[styles.formItem,styles.formCodeItem]}>
                            <Text style={styles.formLabel}>验证码:</Text>
                            <TextInput
                                style={styles.formCode}
                                placeholder='请输入验证码'
                                onChangeText={(text) => this.setState({sms_code: text})}
                                value={this.state.sms_code}
                            />
                            <TouchableOpacity onPress={this._getCode}>
                                <Text style={styles.getCode}>{this.state.codeTxt}</Text>
                            </TouchableOpacity>
                        </View> 
                        <TouchableOpacity onPress={this._onRegister}>
                            <View style={styles.btnLogin}><Text style={styles.btnTxt}>立即注册</Text></View>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.btm}>
                    <TouchableOpacity onPress={this._findPassword}>
                        <View style={styles.btmIT}>
                            <Icon name='help-with-circle' style={styles.pswIcon}></Icon>
                            <Text style={styles.pswTxt}>忘记密码?</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this._login}>
                        <View>
                            <Text style={styles.pswTxt}>登录</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
	container:{
		flex: 1,
		display: 'flex',
		justifyContent:'space-between',
		flexDirection:'column',
		paddingTop: 36,
	},
	logo:{
        textAlign:'center'
    },
    logoImg:{
        width: 80,
        height: 80,
        marginLeft:'auto',
        marginRight:'auto',
        marginTop: 20,
    },
    formBox:{
        paddingLeft: 10,
        paddingRight: 10,
    },
    formItem:{
        borderBottomColor:'#cccccc',
        borderBottomWidth: 1,
        height:48,
        width: '100%',
        display:'flex',
        justifyContent:'space-between',
        flexDirection:'row', 
        paddingLeft: 75
    },
    formPswItem:{
        paddingRight: 45
    },
    formLabel:{
        color:'#111111',
        fontSize: 16,
        lineHeight: 45,
        width: 75,
        marginLeft: -75,
        textAlign:'left'
    },
    formCodeItem:{
        paddingRight: 80
    },
    formUser:{
        width: '100%'
    },
    formPsw:{
        width: '100%'
    },
    formCode:{
        width: '100%'
    },
    formIcon:{
        width:45,
        lineHeight: 45,
        fontSize: 16,
        textAlign:'right'
    },
    getCode:{
        fontSize: 14,
        color:'#FF7F4B',
        lineHeight: 45
    },
    btnLogin:{
        width: 350,
        height: 40,
        backgroundColor:'#FF7F4B',
        borderRadius: 18,
        marginTop: 20,
        marginLeft:'auto',
        marginRight:'auto'
    },
    btnTxt:{
        color:'#FFFFFF',
        fontSize: 16,
        textAlign:'center',
        lineHeight: 40,
    },
    btm:{
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection:'row',
        display:'flex',
        justifyContent:'space-between',
        marginBottom: 60,
    },
    btmIT:{
        flexDirection:'row',
        display:'flex'
    },
    pswIcon:{
        fontSize: 16,
        color:'#FF7F4B',
        marginRight: 10
    },
    pswTxt:{
        fontSize: 16,
        color:'#FF7F4B' 
    }
});

export default HomeScreen;